<template>
    <view class="container">
        <uni-section title="快速排版" subTitle="输入一段OCR之后的话帮你排版" type="line" padding>
            <uni-easyinput type="textarea" autoHeight v-model="inputValue" placeholder="请输入内容"></uni-easyinput>
        </uni-section>
        <view class="button-container">
            <button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="convertPunctuation">
                转换标点
            </button>
            <button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="spaceToPunctuation">
                空格转标点
            </button>
			<button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="clearSpace">
			    去除空格
			</button>
			<button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="clearInput">
			    清空输入
			</button>
			<button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="clearOutput">
			    清空输出
			</button>
			<button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="clearAll">
			    清空全部
			</button>
			<button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="copyToInput">
				复制到输入框
			</button>
			<button size="default" type="primary" class="custom-button" hover-class="is-hover" @click="copyToClipboard">
				复制到剪贴板
			</button>
        </view>
        <uni-section title="转换结果" type="line" padding v-if="outputValue">
            <view class="output-content">
                <text selectable=true>{{ outputValue }}</text>
            </view>
        </uni-section>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                inputValue: '',
                outputValue: ''
            }
        },
        methods: {
            convertPunctuation() {
                // 其他标点符号的半角转全角映射表
                const punctuationMap = {
                    ',': '，',
                    '.': '．',
                    '!': '！',
                    '?': '？',
                    ';': '；',
                    ':': '：',
                    '(': '（',
                    ')': '）',
                    '[': '【',
                    ']': '】',
                    '{': '｛',
                    '}': '｝',
                    '<': '《',
                    '>': '》',
                    ' ': '　',
                };

                // 处理引号的函数
                function processQuotes(text) {
                    let singleQuoteCount = 0;
                    let doubleQuoteCount = 0;

                    return text.replace(/(['"])/g, (match, quote) => {
                        if (quote === "'") {
                            singleQuoteCount++;
                            return singleQuoteCount % 2 === 1 ? '‘' : '’';
                        } else {
                            doubleQuoteCount++;
                            return doubleQuoteCount % 2 === 1 ? '“' : '”';
                        }
                    });
                }

                // 转换函数
                let result = this.inputValue;

                // 先处理其他标点符号
                for (const [key, value] of Object.entries(punctuationMap)) {
                    const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const regex = new RegExp(escapedKey, 'g');
                    result = result.replace(regex, value);
                }

                // 再处理引号
                result = processQuotes(result);

                this.outputValue = result;
            },
            spaceToPunctuation() {
                // 将所有空格替换为逗号
                let result = this.inputValue.replace(/ /g, '，');

                // 确保最后有一个句号，如果没有则添加
                if (!result.endsWith('。') && !result.endsWith('！') && !result.endsWith('？')) {
                    result += '。';
                }

                this.outputValue = result;
            },
			clearSpace(){
				// 匹配所有半角空格和全角空格，替换为空字符串
				this.outputValue = this.inputValue.replace(/[\s　]/g, '');
			},
			clearOutput (){
				// 清空输出
				this.outputValue = "";
			},
			clearInput() {
				// 清空输入框
				this.inputValue = '';
			},
			clearAll() {
				// 清空所有（输入+输出）
				this.inputValue = '';
				this.outputValue = '';
			},
			copyToInput() {
			    // 直接将输出框的值赋给输入框
			    this.inputValue = this.outputValue;
			},
			copyToClipboard() {
			    // 先判断输出框是否有内容
			    if (!this.outputValue) {
			      uni.showToast({
			        title: '输出框无内容可复制',
			        icon: 'none',
			        duration: 500
			      });
			      return;
			    }
			
			    // 调用 uni-app 接口复制到剪贴板
			    uni.setClipboardData({
			      data: this.outputValue,
			      success: () => {
			        uni.showToast({
			          title: '已复制到剪贴板',
			          icon: 'success',
			          duration: 500
			        });
			      },
			      fail: () => {
			        uni.showToast({
			          title: '复制失败，请重试',
			          icon: 'none',
			          duration: 500
			        });
			      }
			    });
			}
        }
    }
</script>

<style>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }

    .button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
		margin-bottom: 10px;
		flex-wrap: wrap;
		padding: 0 10px; /* 可选：在容器两侧增加一些内边距，防止按钮贴边 */
		gap: 10px; /* 关键：设置按钮之间的间距 */
    }

    .custom-button {
        color: #f5f5f5;
        background-color: #1AAD19;
        border-color: #1AAD19;
        padding: 8px 16px;
        border-radius: 4px;
        text-align: center;
		width: calc(50% - 5px); /* 关键：设置宽度为父容器的一半减去 gap 的一半 */
		border: none; /* 可选：移除默认边框，让按钮样式更纯粹 */
    }

    .output-content {
        white-space: pre-wrap;
        word-break: break-all;
        padding: 10px;
        background-color: #f5f5f5;
        border-radius: 4px;
        margin-top: 10px;
    }
</style>